<div class="omv-overflow-hidden omv-position-relative omv-display-flex omv-flex-fill">
  <div class="background omv-position-absolute omv-flex-fill"></div>
  <omv-green-rain class="omv-position-absolute omv-flex-fill"
                  delay="30000"
                  primaryColor="#5dacdf"
                  secondaryColor="#f8d400">
  </omv-green-rain>
  <div class="omv-position-absolute omv-w-100">
    <mat-toolbar class="topbar omv-background-color-transparent omv-display-flex omv-justify-content-between">
      <button mat-icon-button></button>
      <div class="logo"></div>
      <button mat-icon-button
              matTooltip="{{ 'Language' | transloco }}"
              [matMenuTriggerFor]="localeMenu">
        <mat-icon svgIcon="mdi:earth"
                  class="omv-color-white">
        </mat-icon>
      </button>
    </mat-toolbar>
  </div>
  <div class="content omv-flex-fill">
    <omv-intuition-form-page class="omv-h-100 omv-display-flex omv-justify-content-center omv-align-items-center"
                             [config]="this.config">
    </omv-intuition-form-page>
  </div>
</div>

<mat-menu #localeMenu="matMenu">
  <ng-template matMenuContent>
    <button *ngFor="let locale of locales | keyvalue"
            mat-menu-item
            [ngClass]="{'active': locale.key === currentLocale}"
            [disabled]="locale.key === currentLocale"
            (click)="onSelectLocale(locale.key)">
      <span>{{ locale.value }}</span>
    </button>
  </ng-template>
</mat-menu>
